<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="false"
           v-if="bool1 || bool2 || bool3 " :label-position="labelPosition"
           >
    <!--交强险信息-->
    <el-card class="box-card"  shadow="never">

      <div slot="header" class="header-card">
        <span class="header-card-title">交强险信息</span>
      </div>

      <!--询价单审批节点-->
      <el-row :gutter="24" v-if="bool1">
        <el-col :span="12">
          <el-form-item label="租赁禀议保险公司:" v-if="isShow" prop="rentInsuranceCompany">
            <el-input v-model="ruleForm.rentInsuranceCompany" v-if="isEdit" disabled></el-input>
            <span v-else>{{ ruleForm.rentInsuranceCompany }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投保渠道:" prop="insuranceChannels" v-if="isShow">
            <el-select v-model="ruleForm.insuranceChannels" v-if="isEdit" style="width: 100%;" disabled>
              <el-option v-for="v in dict.type.insurance_channels" :key="v.value" :label="v.label"
                         :value="Number(v.value)">
              </el-option>
            </el-select>
            <span v-else>{{ selectDictLabel(dict.type.insurance_channels, ruleForm.insuranceChannels) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交强险公司:" prop="jqxCompany" v-if="isShow">
            <insurance-select businessTypeCode="5" placeholder="请选择交强险公司" v-if="isEdit" @change="handleChange"/>
<!--            <el-input v-model="ruleForm.jqxCompany" v-if="isEdit" placeholder="请输入交强险公司"></el-input>-->
            <span v-else>{{ ruleForm.jqxCompany }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险公司编码:" prop="jqxCompanyCode" v-if="isShow">
            <el-input v-model="ruleForm.jqxCompanyCode" disabled v-if="isEdit" placeholder="请输入交强险公司编码"></el-input>
            <span v-else>{{ ruleForm.jqxCompanyCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交强险性质:" prop="jqxInsuranceType" v-if="isShow">
            <el-select v-model="ruleForm.jqxInsuranceType" v-if="isEdit" style="width: 100%;"
                       placeholder="请选择交强险性质">
              <el-option label="运营" value="1">
              </el-option>
              <el-option label="非运营" value="2">
              </el-option>
            </el-select>
            <span v-else>
              {{ ruleForm.jqxInsuranceType == 1 ? '运营' : ruleForm.jqxInsuranceType == 2 ? '非运营' : '' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险起保日:" prop="jqxExpectBeginTime" v-if="isShow">
            <el-date-picker v-model="ruleForm.jqxExpectBeginTime" type="date" placeholder="请选择交强险起保日"
                            v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ ruleForm.jqxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车船税是否缴纳:" prop="carTaxStatus" v-if="isShow">
            <el-radio-group v-model="ruleForm.carTaxStatus" v-if="isEdit" style="width: 100%;">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
            <span v-else>{{
                ruleForm.carTaxStatus == '1' ? '是' : ruleForm.carTaxStatus == '2' ? '否' : ""
              }}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <!--保司报价节点-->
      <el-row :gutter="24" v-if="bool2">
        <el-col :span="12">
          <el-form-item label="交强险公司:">
            <span>{{ ruleForm.jqxCompany }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险公司编码:">
            <span>{{ ruleForm.jqxCompanyCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险起保日:" prop="jqxExpectBeginTime" v-if="isShow">
            <el-date-picker v-model="ruleForm.jqxExpectBeginTime" type="date" placeholder="请选择交强险起保日"
                            v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ ruleForm.jqxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险到期日:" prop="jqxExpectEndTime" v-if="isShow">
            <el-date-picker v-model="ruleForm.jqxExpectEndTime" type="date" placeholder="请选择交强险到期日"
                            v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ ruleForm.jqxExpectEndTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险性质:" prop="jqxInsuranceType" v-if="isShow">
            <span>
              {{ ruleForm.jqxInsuranceType == 1 ? '运营' : ruleForm.jqxInsuranceType == 2 ? '非运营' : '' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险保费:" prop="jqxAmount" v-if="isShow">
            <el-input v-model="ruleForm.jqxAmount" v-if="isEdit" @change="changeAmount('jqxAmount')"
                      placeholder="请输入交强险保费"></el-input>
            <span v-else>{{ ruleForm.jqxAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车船税是否缴纳:" prop="carTaxStatus" v-if="isShow">
            <span>{{
                ruleForm.carTaxStatus == '1' ? '是' : ruleForm.carTaxStatus == '2' ? '否' : ""
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车船税:" prop="carTax" v-if="isShow">
            <el-input v-model="ruleForm.carTax" v-if="isEdit" @change="changeAmount('carTax')"
                      placeholder="请输入车船税"></el-input>
            <span v-else>{{ ruleForm.carTax }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!--保司报价审批点-->
      <el-row :gutter="24" v-if="bool3">
        <el-col :span="12">
          <el-form-item label="租赁禀议保险公司:">
            <span>{{ ruleForm.rentInsuranceCompany }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投保渠道:">
            <span>{{ selectDictLabel(dict.type.insurance_channels, ruleForm.insuranceChannels) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险公司:">
            <span>{{ ruleForm.jqxCompany }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险公司编码:">
            <span>{{ ruleForm.jqxCompanyCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险起保日:" prop="jqxExpectBeginTime" v-if="isShow">
            <span>{{ ruleForm.jqxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险到期日:" prop="jqxExpectEndTime" v-if="isShow">
            <span>{{ ruleForm.jqxExpectEndTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险性质:" prop="jqxInsuranceType" v-if="isShow">
            <span>
              {{ ruleForm.jqxInsuranceType == 1 ? '运营' : ruleForm.jqxInsuranceType == 2 ? '非运营' : '' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险保费:" prop="jqxAmount" v-if="isShow">
            <span>{{ ruleForm.jqxAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车船税是否缴纳:" prop="carTaxStatus" v-if="isShow">
            <span>{{
                ruleForm.carTaxStatus == '1' ? '是' : ruleForm.carTaxStatus == '2' ? '否' : ""
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车船税:" prop="carTax" v-if="isShow">
            <span>{{ ruleForm.carTax }}</span>
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>

    <!--商业险信息-->
    <el-card class="box-card">

      <div slot="header" class="header-card">
        <span class="header-card-title">商业险信息</span>
      </div>

      <!--询价单审批节点-->
      <el-row :gutter="24" v-if="bool1">

        <el-col :span="12">
          <el-form-item label="租赁禀议保险公司:" v-if="isShow" prop="rentInsuranceCompany">
            <el-input v-model="ruleForm.rentInsuranceCompany" v-if="isEdit" disabled></el-input>
            <span v-else>{{ ruleForm.rentInsuranceCompany }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="投保渠道:" v-if="isShow" prop="insuranceChannels">
            <el-select v-model="ruleForm.insuranceChannels" v-if="isEdit" style="width: 100%;" disabled>
              <el-option v-for="v in dict.type.insurance_channels" :key="v.value" :label="v.label"
                         :value="Number(v.value)">
              </el-option>
            </el-select>
            <span v-else>{{ selectDictLabel(dict.type.insurance_channels, ruleForm.insuranceChannels) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险公司:" prop="syxCompany" v-if="isShow">
<!--            <el-input v-model="ruleForm.syxCompany" v-if="isEdit" placeholder="请输入商业险公司"></el-input>-->
            <insurance-select businessTypeCode="5" placeholder="请选择商业险公司" v-if="isEdit" @change="handleChange1"/>
            <span v-else>{{ ruleForm.syxCompany }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险公司编码:" prop="syxCompanyCode" v-if="isShow">
            <el-input v-model="ruleForm.syxCompanyCode" disabled v-if="isEdit" placeholder="请输入商业险公司编码"></el-input>
            <span v-else>{{ ruleForm.syxCompanyCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险性质:" prop="syxInsuranceType" v-if="isShow">
            <el-select v-model="ruleForm.syxInsuranceType" v-if="isEdit" style="width: 100%;"
                       placeholder="请选择商业险性质">
              <el-option label="运营" value="1">
              </el-option>
              <el-option label="非运营" value="2">
              </el-option>
            </el-select>
            <span v-else>{{
                ruleForm.syxInsuranceType == 1 ? '运营' : ruleForm.syxInsuranceType == 2 ? '非运营' : ''
              }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险起保日:" prop="syxExpectBeginTime" v-if="isShow">
            <el-date-picker v-model="ruleForm.syxExpectBeginTime" type="date" placeholder="请选择商业险起保日"
                            v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ ruleForm.syxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!--保司报价节点-->
      <el-row :gutter="24" v-if="bool2">

        <el-col :span="12">
          <el-form-item label="商业险公司:">
            <span>{{ ruleForm.syxCompany }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险公司编码:">
            <span>{{ ruleForm.syxCompanyCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险起保日:" prop="syxExpectBeginTime" v-if="isShow">
            <el-date-picker v-model="ruleForm.syxExpectBeginTime" type="date" placeholder="请选择商业险起保日"
                            v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ ruleForm.syxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险到期日:" prop="syxExpectEndTime" v-if="isShow">
            <el-date-picker v-model="ruleForm.syxExpectEndTime" type="date" placeholder="请选择商业险到期日"
                            v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ ruleForm.syxExpectEndTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险性质:" prop="syxInsuranceType" v-if="isShow">
            <span>{{ ruleForm.syxInsuranceType == 1 ? '运营' : ruleForm.syxInsuranceType == 2 ? '非运营' : '' }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险保费:" prop="syxAmount" v-if="isShow">
            <el-input v-model="ruleForm.syxAmount" v-if="isEdit" @change="changeAmount('syxAmount')"
                      placeholder="请输入商业险保费"></el-input>
            <span v-else>{{ ruleForm.syxAmount }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!--保司报价审批点-->
      <el-row :gutter="24" v-if="bool3">

        <el-col :span="12">
          <el-form-item label="租赁禀议保险公司:">
            <span>{{ ruleForm.rentInsuranceCompany }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="投保渠道:">
            <span>{{ selectDictLabel(dict.type.insurance_channels, ruleForm.insuranceChannels) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险公司:">
            <span>{{ ruleForm.商业险公司编码 }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险公司编码:">
            <span>{{ ruleForm.syxCompanyCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险起保日:" prop="syxExpectBeginTime" v-if="isShow">
            <span>{{ ruleForm.syxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险到期日:" prop="syxExpectEndTime" v-if="isShow">
            <span>{{ ruleForm.syxExpectEndTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险性质:" prop="syxInsuranceType" v-if="isShow">
            <span>{{ ruleForm.syxInsuranceType == 1 ? '运营' : ruleForm.syxInsuranceType == 2 ? '非运营' : '' }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商业险保费:" prop="syxAmount" v-if="isShow">
            <span>{{ ruleForm.syxAmount }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="24">
          <div style="padding-bottom:8px;font-size: 16px;">保险套餐</div>
          <el-table :data="ruleForm.businessList" border size='mini'>
            <el-table-column align="center" prop="insuranceProName" label="商业险种"/>

            <el-table-column align="center" prop="insuranceQuota" label="保额/万元"/>

            <el-table-column align="center" label="保险费用/元"
                             v-if="bool2 || bool3">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'businessList.'+$index+'.insurancePrice'"
                              :rules="{required: isEdit,  trigger: 'blur'}">
                  <el-input v-if="bool2" v-model="row.insurancePrice"
                            @change="changeTable(row, $index, 'insurancePrice')" size="mini"/>
                  <span v-else>{{ row.insurancePrice }}</span>
                </el-form-item>

              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "InquirySheet", //询价单审批
  dicts: ["insurance_channels"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
    activityId: {
      type: String,
      default: "",
    },
    pageConfig: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    insuranceSelect: () => import('../insuranceSelect')
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.obj, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.state === 'write') {
        return 'top'
      } else {
        return 'right'
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (newValue) {
          if (newValue.tableData) {
            this.obj = newValue.tableData[0];
          } else {
            this.obj = newValue;
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      obj: {},
      isShow: true,
      rules: {
        rentInsuranceCompany: [
          {
            required: this.isEdit,
            message: "请输入租赁禀议保险公司",
            trigger: "blur",
          },
        ],
        insuranceChannels: [
          {required: this.isEdit, message: "请选择投保渠道", trigger: "blur"},
        ],
        jqxCompany: [
          {
            required: this.isEdit,
            message: "请输入交强险公司",
            trigger: "blur",
          },
        ],
        jqxCompanyCode: [
          {
            required: this.isEdit,
            message: "请选择交强险公司编码",
            trigger: "blur",
          },
        ],
        jqxExpectBeginTime: [
          {
            type: "string",
            required: this.isEdit,
            message: "请选择交强险起保日",
            trigger: "blur",
          },
        ],
        jqxExpectEndTime: [
          {
            type: "string",
            required: this.isEdit,
            message: "请选择交强险到期日",
            trigger: "blur",
          },
        ],
        jqxInsuranceType: [
          {
            required: this.isEdit,
            message: "请选择交强险性质",
            trigger: "blur",
          },
        ],
        carTaxStatus: [
          {
            required: this.isEdit,
            message: "请选择车船税是否缴纳",
            trigger: "change",
          },
        ],
        jqxAmount: [
          {
            required: this.isEdit,
            message: "请输入交强险保费",
            trigger: "blur",
          },
        ],
        carTax: [
          {required: this.isEdit, message: "请输入车船税", trigger: "blur"},
        ],

        syxCompany: [
          {required: true, message: "请选择商业险公司", trigger: "blur"},
        ],
        syxCompanyCode: [
          {required: true, message: "请输入商业险公司编码", trigger: "blur"},
        ],
        syxExpectBeginTime: [
          {required: true, message: "请选择商业险起保日", trigger: "blur"},
        ],
        syxInsuranceType: [
          {required: true, message: "请选择商业险性质", trigger: "change"},
        ],
        syxAmount: [
          {required: true, message: "请输入商业险保费", trigger: "blur"},
        ],
        syxExpectEndTime: [
          {required: true, message: "请选择商业险到期日", trigger: "blur"},
        ],
      },
      bool1:false,
      bool2:false,
      bool3:false,
      activityName:'',
      formId:'',
      shopInsuranceBool: false,//店保
      ourCompanyBool: false,//我司
    };
  },
  created() {
  },
  mounted() {
    let index = this.pageConfig.findIndex(a => a.activityId === this.activityId)
    if (index !== -1) {
      this.activityName = this.pageConfig[index].activityConfig.activityName
      this.formId = this.pageConfig[index].activityConfig.formId
    }
    //我司节点1
    if (this.activityName === '询价单审批' || this.formId === '"1759815429053026305"') {
      this.bool1 = true
    }
    //我司节点2
    if (this.activityName === '保司报价' || this.formId === '1759815539078008834')  {
      this.bool2 = true
    }
    //我司节点3
    if (this.activityName === '保司报价审批' || this.formId === '1759815634838163458') {
      this.bool3 = true
    }

  },
  methods: {
    handleShopInsurace() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    // 店保金额格式
    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;

      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
      // this.addAmountNun = this.addAmount(this.detailForm.carMaintainProjectList, 'price')
    },

    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (!msg.test(this.ruleForm[str])) {
        this.ruleForm[str] = "";
      } else {
        this.ruleForm[str] = this.ruleForm[str]
            .toString()
            .match(/^\d+(?:\.\d{0,2})?/)[0];
      }
    },

    handleChange(val) {
      this.value.jqxCompanyCode = val.code
      this.value.jqxCompany = val.name
      this.value.jqxCompanyId = val.id
      this.$refs.ruleForm.clearValidate('jqxCompany')
      this.$refs.ruleForm.clearValidate('jqxCompanyCode')
    },

    handleChange1(val) {
      this.value.syxCompanyCode = val.code
      this.value.syxCompany = val.name
      this.value.syxCompanyId = val.id
      this.$refs.ruleForm.clearValidate('jqxCompany')
      this.$refs.ruleForm.clearValidate('jqxCompanyCode')
    },
    valid() {
      return new Promise((resolve) => {
        if (bool1|| bool2 || bool3) {
          this.$refs.ruleForm.validate((valid) => {
            resolve(valid);
          });
        } else {
          resolve(true);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep.el-form-item {
    display: flex;
    align-items: center;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;
  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;
  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}
</style>


